<template>
  <px-dialog :title="title" :model-value="dialogVisibleCorpper" width="800px" append-to-body :before-close="beforeClose" @opened="openDialog">
    <px-row>
      <px-col :span="24" style="height: 600px">
        <vue-cropper v-if="showCropper" ref="cropper" v-bind="{ ...options }" @realTime="realTime" />
      </px-col>
      <!-- <px-col :span="12" style="height: 300px">
        <div class="preview-box">
          <img v-if="previews.url" :src="previews.url" style="max-width: none" :style="previews.img" />
          <span v-else />
        </div>
      </px-col> -->
    </px-row>
    <px-row style="margin-top: 12px">
      <px-col :span="12">
        <px-row>
          <px-col :span="8">
            <px-upload action="#" :http-request="() => {}" :before-upload="beforeUpload" :show-file-list="false">
              <px-button>选择</px-button>
            </px-upload>
          </px-col>
          <px-col :span="4">
            <px-button :icon="Plus" @click="changeScale(1)" />
          </px-col>
          <px-col :span="4">
            <px-button :icon="Minus" @click="changeScale(-1)" />
          </px-col>
          <px-col :span="4">
            <px-button :icon="RefreshLeft" @click="rotateLeft()" />
          </px-col>
          <px-col :span="4">
            <px-button :icon="RefreshRight" @click="rotateRight()" />
          </px-col>
        </px-row>
      </px-col>
      <px-col :span="4" :offset="8" style="margin-left: 22.3%">
        <px-button type="primary" @click="determine()">提 交</px-button>
      </px-col>
    </px-row>
  </px-dialog>
</template>

<script setup lang="ts">
import { Plus, Minus, RefreshLeft, RefreshRight } from "@px-ui/icons-vue";
import { PxMessage } from "px-ui";
import "vue-cropper/dist/index.css";
import { VueCropper } from "vue-cropper";
import { getCurrentInstance, ref, reactive, watch } from "vue";
import { uploadEqpRealImg } from "@/api/visual/visualConfig";

const { proxy } = getCurrentInstance();
const dialogVisibleCorpper = defineModel("dialogVisibleCorpper");
let imgfile = "";
const props = defineProps({
  title: {
    type: String,
    default: "上传图片"
  },
  eqpId: {
    type: String,
    default: ""
  }
});
const showCropper = ref(false);
// cropper配置  更多配置可参考 https://www.npmjs.com/package/vue-cropper
const options = reactive({
  img: null, // 裁剪图片的地址
  outputType: "png", // 裁剪生成图片的格式 jpeg, png, webp
  autoCrop: true, // 是否默认生成截图框
  fixedBox: false, // 固定截图框大小
  outputSize: 1,
  high: false,
  full: true
});
const previews = ref({
  url: ""
});

// 打开裁剪弹窗
const openDialog = () => {
  showCropper.value = true;
};
// 修改图片大小 正数为变大 负数变小
const changeScale = num => {
  num = num || 1;
  proxy.$refs.cropper.changeScale(num);
};
// 向左边旋转90度
const rotateLeft = () => {
  proxy.$refs.cropper.rotateLeft();
};
// 向右边旋转90度
const rotateRight = () => {
  proxy.$refs.cropper.rotateRight();
};
// 上传图片处理
const beforeUpload = rawFile => {
  if (rawFile.type.indexOf("image/") == -1) {
    PxMessage.error("请上传图片类型文件!");
    return false;
  }
  imgfile = rawFile;
  const reader = new FileReader();
  reader.readAsDataURL(rawFile);
  reader.onload = () => {
    // 图片在这里
    options.img = reader.result;
  };
};
// 实时预览事件
const realTime = data => {
  previews.value = data;
};
const emit = defineEmits(["confirm"]);

// 关闭弹窗
const beforeClose = () => {
  options.img = null;
  previews.value.url = "";
  dialogVisibleCorpper.value = false;
};
// 提交图片
const determine = () => {
  // let aLink = document.createElement("a");
  // aLink.download = "demo";
  proxy.$refs.cropper.getCropBlob(async data => {
    console.log(data);
    //下载逻辑
    // window.URL.createObjectURL(data);
    // aLink.href = window.URL.createObjectURL(data);
    // aLink.click();
    const formData = new FormData();
    let fileOfBlob = new File([data], imgfile.name, { type: imgfile.type });
    formData.append("files", fileOfBlob);

    formData.append("eqpId", props.eqpId);
    await uploadEqpRealImg(formData);
    options.img = null;
    previews.value.url = "";
    dialogVisibleCorpper.value = false;
    emit("confirm");
  });
};
</script>

<style lang="scss" scoped>
.avatar-container {
  .img-box {
    width: 10vw;
    height: 10vw;
    border: 1px solid #ccc;
  }
}

.preview-box {
  position: absolute;
  top: 50%;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border: 1px solid #ccc;
  transform: translate(50%, -50%);
}
</style>
